<template>
	<view class="page-content">
		<u-loading-page :loading="loading" bg-color="#e8e8e8"></u-loading-page>
		<u-row customStyle="margin: 5px">
			<u-col span="9"> </u-col>
		</u-row>
		<u--form border-bottom labelWidth="auto" labelAlign="left" labelPosition="left" :model="detailform"
			:rules="rules" ref="form1">
			<u-form-item label="服务名称" prop="muName" borderBottom ref="item1">
				<u--text bold margin="5px" align="right" :text="detailform.muName"></u--text>
			</u-form-item>

			<u-form-item label="服务类型" prop="serverType" borderBottom ref="item1">
				<u--text bold margin="5px" align="right" :text="detailform.serverType"></u--text>
			</u-form-item>

			<u-form-item label="服务说明" prop="serverExplain" borderBottom ref="item1">
				<u--text bold margin="5px" align="right" :text="detailform.serverExplain"></u--text>
			</u-form-item>

			<u-form-item label="推荐程度" prop="recommend" borderBottom ref="item1">
				<u--text bold margin="5px" align="right" :text="detailform.recommend"></u--text>
			</u-form-item>

			<!-- <u-form-item label="服务佣金" prop="serverFee" borderBottom ref="item1">
				<u--text bold margin="5px" align="right" :text="detailform.serverFee"></u--text>
			</u-form-item> -->

			<u-form-item label="完成情况" prop="comStatus" borderBottom ref="item1">
				<u--text bold margin="5px" align="right" :text="detailform.comStatus"></u--text>
			</u-form-item>

			<u-form-item label="完成时间" prop="comTime" borderBottom ref="item1">
				<u--text bold margin="5px" align="right" :text="detailform.comTime"></u--text>
			</u-form-item>

			<u-form-item label="备注" prop="remark" borderBottom ref="item1">
				<u--input customStyle="font-weight: bold;margin: 5px;" inputAlign="center" shape="square" border="none"
					v-model="detailform.remark"></u--input>
			</u-form-item>

			<u-form-item label="服务前照片" prop="beforeImg" borderBottom ref="item1">
				<imageUpload @success="handel_beforeImg_uploadSuccess" v-model="detailform.beforeImg" />
			</u-form-item>

			<u-form-item label="服务后照片" prop="afterImg" borderBottom ref="item1">
				<imageUpload @success="handel_afterImg_uploadSuccess" v-model="detailform.afterImg" />
			</u-form-item>
		</u--form>

		<u-row customStyle="margin:5px">
			<u-col span="12">
				<u-button class="custom-style" type="success" size="small" @click="handel_submit_click" text="提交">
				</u-button>
			</u-col>
		</u-row>

		<u-modal :show="rateShow" title="服务评分" @confirm="handle_confirm_rate">
			<view class="slot-content">
				<u-row v-for="item in allFuWu" customStyle="padding-bottom: 1rem">
					<u--text type="primary" :text="item.muName + ':' + item.star"></u--text>
					<u-rate gutter=10 size="30" v-model="item.star"></u-rate>
				</u-row>
				<u-row>
					<u--text type="success" :text="'总体评分:' + serviceApply.star"></u--text>
					<u-rate gutter=10 size="30" v-model="serviceApply.star"></u-rate>
				</u-row>
			</view>
		</u-modal>
	</view>
</template>

<script>
	import {
		listSlhgzresqjl,
		getSlhgzresqjl,
		delSlhgzresqjl,
		addSlhgzresqjl,
		updateSlhgzresqjl,
	} from "@/api/elder/serviceApply.js";

	import {
		listSlhgzfwwc,
		getSlhgzfwwc,
		delSlhgzfwwc,
		addSlhgzfwwc,
		updateSlhgzfwwc,
	} from "@/api/elder/serviceApply_SMFW.js";

	import {
		transformPostBody,
		transformRequestURL,
	} from "@/utils/requestParams.js";

	import {
		GetDatetime
	} from "@/utils/stringFormat.js";

	import {
		QueryDeviceInstallList,
		addDeviceInstall,
		updateDeviceInstall,
		getDeviceInstall,
		delDeviceInstall,
		QueryDeviceInstallHistory,
		QueryDeviceInstallDev,
	} from "@/api/elder/DeviceInstall";

	import imageUpload from "@/components/image-upload/multiple.vue";
	//from "@/components/image-upload/single.vue";

	export default {
		components: {
			imageUpload,
		},
		data() {
			return {
				showProdType: false,
				connetStatus: "未测试",
				detailform: {
					prodSn: "",
					beforeImg: "",
					afterImg: "",
				},
				serviceApply: {
					searchValue: null,
					createBy: null,
					createTime: null,
					updateBy: null,
					updateTime: null,
					remark: null,
					params: {},
					id: null,
					taskId: null,
					taskTypeCode: null,
					taskTypeName: null,
					begName: null,
					begTime: null,
					serverType: null,
					serverId: null,
					serverName: null,
					elderId: null,
					elderName: null,
					elderIdno: null,
					taskProvince: null,
					taskCity: null,
					taskDistrict: null,
					taskTown: null,
					taskVillage: null,
					taskStreet: null,
					taskRegisterAdd: null,
					taskLongitude: null,
					taskLatitude: null,
					planStartTime: null,
					planEndTime: null,
					startTime: null,
					endTime: null,
					status: null,
					taskDetail: null,
					isSelfSign: null,
					elderSign: null,
					approveName: null,
					approveResult: null,
					approveOpinion: null,
					star: null,
					appraise: null,
					realLongitude: null,
					realLatitude: null,
					attribute1: null,
					attribute2: null,
					attribute3: null,
					attribute4: null,
					attribute5: null,
					attribute6: null,
					attribute7: null,
					attribute8: null,
					attribute9: null,
					attribute10: null,
					attribute11: null,
					attribute12: null,
					attribute13: null,
					attribute14: null,
					attribute15: null,
					attribute16: null,
					attribute17: null,
					attribute18: null,
					attribute19: null,
					attribute20: null,
					attribute21: null,
					attribute22: null,
					attribute23: null,
					attribute24: null,
					attribute25: null,
					attribute26: null,
					attribute27: null,
					attribute28: null,
					attribute29: null,
					attribute30: null,
					attribute31: null,
					attribute32: null,
					defaultCommision: null,
					realCommision: null,
					commisionPay: null,
					prodToprice: null,
					prodRealpay: null,
					prodPay: null,
				},
				loading: false, //加载中
				id: null,
				shenqingId: null, //申请id
				// prodTypeActions: [{
				// 		name: '智能设备',
				// 	},
				// 	{
				// 		name: '基础设施',
				// 	},
				// ],
				rateShow: false,
				allFuWu: [],
				rules: {
					prodSn: {
						type: "string",
						required: true,
						message: "请填写设备序列号",
						trigger: ["blur", "change"],
					},
					beforeImg: {
						type: "string",
						required: true,
						message: "请拍摄改造前照片",
						trigger: ["blur", "change"],
					},
					afterImg: {
						type: "string",
						required: true,
						message: "请拍摄改造后照片",
						trigger: ["blur", "change"],
					},
				},
			};
		},
		onLoad: function(options) {
			console.log("options", options.id);
			this.id = options.id;
			this.shenqingId = options.shenqingId;
		},
		onShow() {
			this.getList();
		},
		onReady() {
			//如果需要兼容微信小程序，并且校验规则中含有方法等，只能通过setRules方法设置规则。
			this.$refs.form1.setRules(this.rules);
		},
		methods: {
			getList() {
				this.loading = true;
				getSlhgzfwwc(this.id).then((response) => {
					console.log("getGzxmmx", response);
					this.loading = false;
					this.detailform = Object.assign({}, this.detailform, response.data);
				});
			},
			handel_beforeImg_uploadSuccess(result) {
				this.detailform.beforeImg = result.fileName;
				let partParmeter = {
					uuid: this.detailform.uuid,
					beforeImg: this.detailform.beforeImg,
				};
				console.log("多图上传：", partParmeter);
				updateSlhgzfwwc(partParmeter).then((response) => {
					console.log(
						"handel_beforeImg_uploadSuccess上传成功",
						response,
						this.detailform
					);
				});
			},
			handel_afterImg_uploadSuccess(result) {
				this.detailform.afterImg = result.fileName;
				let partParmeter = {
					uuid: this.detailform.uuid,
					afterImg: this.detailform.afterImg,
				};
				updateSlhgzfwwc(partParmeter).then((response) => {
					console.log(
						"handel_afterImg_uploadSuccess上传成功",
						response,
						this.detailform
					);
				});
			},
			prodTypeSelect(item) {
				this.detailform.prodType = item.name;
			},
			//提交,并验证是否所有需求都完成了
			handel_submit_click() {
				this.$refs.form1
					.validate()
					.then((res) => {
						this.loading = true;
						//提交修改
						this.detailform.comStatus = "服务完成";
						this.detailform.comTime = GetDatetime();
						updateSlhgzfwwc(this.detailform).then((response) => {
							//this.$tab.navigateBack();
							this.checkAllFinish();
							this.loading = false;
							return;
						});
					})
					.catch((errors) => {
						uni.$u.toast("校验失败,请修改后再尝试提交");
					});
			},
			//检查是否所有任务都完成，是的话更新申请表
			checkAllFinish() {
				//先获取所有申请
				listSlhgzfwwc({
					taskId: this.detailform.taskId,
				}).then((response) => {
					let isAllFinish = true;
					this.allFuWu = response.rows;
					response.rows.forEach((item) => {
						if (item.comStatus != "服务完成") {
							isAllFinish = false;
						}
					});
					if (isAllFinish) {
						//评价全部服务
						//更新整个申请状态
						let partParmeter = {
							id: this.id,
							status: "服务完成",
							endTime: GetDatetime(),
						};
						updateSlhgzresqjl(partParmeter).then((res) => {
							console.log("updateSlhgzresqjl", res, this.serviceApply);
							getSlhgzresqjl(this.shenqingId).then((response) => {
								this.serviceApply = response.data;
								this.rateShow = true; //弹出评分
							});
						});
					} else {
						this.$tab.navigateBack();
					}
				});
			},
			//确认提交评分后触发
			handle_confirm_rate() {
				//this.allFuWu数目次更新所有项目评分
				this.allFuWu.forEach((item) => {
					let partParmeter = {
						uuid: item.uuid,
						star: item.star,
					};
					updateSlhgzfwwc(partParmeter).then((response) => {
						console.log("更新评分成功", response);
					});
				});

				//更新整个申请状态
				let partParmeter = {
					id: this.serviceApply.id,
					status: "已评分",
					endTime: GetDatetime(),
					star: this.serviceApply.star,
				};
				updateSlhgzresqjl(partParmeter).then((response) => {
					this.$tab.navigateBack();
				});
			},
		},
	};
</script>

<style lang="scss">
	.page {
		background-color: white;
		display: flex;
		justify-content: center;
	}

	.page-content {
		width: 93%;
	}

	.custom-style {
		width: 80%;
		font-weight: bolder;
		font-size: 17px;
	}
</style>